/* eslint-disable no-template-curly-in-string */
/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
// import { Icon } from 'antd';
// import $ from 'jquery'
import "./index.scss"
export default class index extends Component {
  constructor() {
    super()
    this.state = {
      nomal: 0,
      list: [],
      shops: []
    }
  }
  componentDidMount = async () => {
    const data = await this.$axios.get("http://localhost:5000/girds")
    const res = await this.$axios.get("http://localhost:5000/shops")
    console.log(res);

    this.setState({
      list: data.data,
      shops: res.data
    })
  }
  handleclick = (e) => {
    let oLi = e.target.parentNode.children
    for (let i = 0; i < oLi.length; i++) {
      oLi[i].className = ""
      oLi[i].id = ""
    }
    e.target.className = "current"
    e.target.id = "ai"
    for (let j = 0; j < oLi.length; j++) {
      if (oLi[j].id === "ai") {
        document.querySelector(".grid-hot-cate-right-box").style.top = -j * 300 + "px"
        document.querySelector(".grid-hot-cate-right-box").style.transition = "all 0.5s ease"
      }
    }
  }
  handleenter = (e) => {
    if (e.target.id === "ai") {
      return
    }
    e.target.className = "current"
  }
  handleout = (e) => {
    if (e.target.id === "ai") {
      e.target.className = "current"
    } else {
      e.target.className = ""
    }
  }
  handleshopenter=(e)=>{
    var oooo=e.target
    e.target.style.opacity=0.5
    setTimeout(()=>{
      oooo.style.opacity=1
      oooo.style.transition="all .5s ease"
    },600)
  }
  render() {
    return (
      <div className="gird">
        <div className="gird-img-box">
          <div className="gird-img-list">
            <img className="gird-img" src="https://a.vpimg2.com/upload/flow/2020/01/13/69/15788800562371.jpg" />
          </div>
        </div>
        <div className="grid-hot-box main">
          <div className="grid-hot-title">
            <div className="grid-hot-title-line"></div>
            <div className="grid-hot-title-big"></div>
            <div className="grid-hot-title-small">Hot category</div>
          </div>
          <div className="grid-hot-cate">
            <div className="grid-hot-cate-left">
              <ul className="grid-hot-cate-list">
                {
                  this.state.list.map((item, index) => {
                    return <li className={[this.state.nomal === index ? "current " : ""]} key={index} onClick={this.handleclick} onMouseEnter={this.handleenter} onMouseLeave={this.handleout}>
                      {item.name}
                    </li>
                  })
                }
              </ul>
            </div>
            <div className="grid-hot-cate-right">
              <div className="grid-hot-cate-right-box">
                {
                  this.state.list.map((el, index) => {
                    return <ul key={index}>
                      {
                        el.images.map((item, index) => {
                          return <li key={index}>
                            <Link to="/grid/oper"><img src={item.img} /></Link>
                            <div>{item.title}</div>
                          </li>
                        })
                      }
                    </ul>
                  })
                }
              </div>
            </div>
          </div>
        </div>
        <div className="grid-shop-box main">
          <div className="grid-shop-title">
            <img src="https://a.vpimg4.com/upload/dop/2016/07/05/14/jinritemai_ljnt_qazu.png" />
          </div>
          {
            this.state.shops.map((ele,index) => {
              return <div className="grid-shop-det" key={index}>
                <img src={ele.img} onMouseEnter={this.handleshopenter} className="grid-shop-img"/>
                <div className="grid-shop-info">
                  <span className="grid-shop-info-name">{ele.title}</span>
                  <div className="grid-shop-info-pms">
                    <span>{ele.pre}</span>折起
              </div>
                </div>
              </div>
            })
          }
        </div>

      </div>
    )
  }
}
